<template>
  <view class="container">
    <view class="top">
      <view class="notice">
        <uni-icons type="info" size="13"></uni-icons>
        每题消费0.5个库币，视频消费1-2个库币
      </view>
      <view class="checkbox">
        <!-- <text class="text">方式：</text> -->
        <uni-data-checkbox v-model="state.select_type" :localdata="typeListOption" @change="typeChange" mode="tag"
          class="checkbox-item"></uni-data-checkbox>
      </view>
      <view class="checkbox">
        <!-- <text class="text">学科：</text> -->
        <uni-data-checkbox v-model="state.select_subject" :localdata="subjectListOption" @change="subjectChange"
          mode="tag"></uni-data-checkbox>
      </view>
      <view class="checkbox">
        <text class="text">已做题：</text>
        <uni-data-checkbox v-model="state.select_has_done" :localdata="hasDoneDOption"
          @change="hasDoneChange"></uni-data-checkbox>
      </view>
    </view>
    <scroll-view scroll-y class="card" enable-flex>
      <uni-card v-for="(item, index) in exerciseKnowledgeList" :key="index" :title="item.name" class="guide-content"
        @click="onClickCard(item)">
        <text class="blue_color">已做{{ item.has_done }}题，</text>
        <text class="green_color">共有{{ item.questions_amount }}题</text>
      </uni-card>
    </scroll-view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { checkItem, ExerciseKnowledgepointItem, KnowledgeItem } from '@/types/home'
import { getExerciseKnowledgeAPI } from '@/services/home'
import UniDataCheckbox from '@dcloudio/uni-ui/lib/uni-data-checkbox/uni-data-checkbox.vue'
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import UniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'

const exerciseKnowledgeList = ref<ExerciseKnowledgepointItem[]>([])
// 存放响应式变量
const state = reactive({
  select_type: 1,
  select_subject: 1,
  select_has_done: 1,
  select_knowledgepoint: 1,
})
// 选择框列表
const subjectListOption = ref<checkItem[]>([
  { text: '信息', value: 1, disable: false },
  { text: '通用', value: 2, disable: false },
  { text: '职高', value: 3, disable: false },
])
let typeListOption = ref<checkItem[]>([
  { text: '按知识点', value: 1, disable: false },
  { text: '按试卷', value: 2, disable: false },
])
// tag的样式列表
const tagTypeList = ['default', 'primary', 'success', 'warning', 'error', 'royal']
// 根据index按顺序显示颜色
const tagColor = (index: number) => {
  return tagTypeList[index % 6]
}
// 点击卡片，进入该知识点的题目页面
const onClickCard = (knowledgepoint: ExerciseKnowledgepointItem) => {
  let knowledgepoint_id: number = knowledgepoint.id
  let knowledgepoint_name: string = knowledgepoint.name
  let questions_amount: number = knowledgepoint.questions_amount
  console.log('切换页面')
  if (questions_amount > 0) {
    uni.navigateTo({
      url: `/pages/puzzle/exercise_step_two?has_done=${state.select_has_done}&id=${knowledgepoint_id}&name=${knowledgepoint_name}&type=knowledgepoint`,
    })
  } else {
    uni.showToast({ icon: 'error', title: '本栏目暂无题目' })
  }
}
// 已做题选择框列表
const hasDoneDOption: checkItem[] = [
  { text: '要', value: 1, disable: false },
  { text: '不要', value: 2, disable: false },
]
// 组卷方式改变了，切换到该页面或tarbar，根据选择的值判断
const typeChange = (e: any) => {
  console.log('组卷方式改变：', e)
  if (parseInt(e.detail.value) == 2) {
    uni.navigateTo({
      url: `/pages/puzzle/paper_exercise_step_one`,
    })
  }
}
// 学科改变了,重新获取该学科的知识点
const subjectChange = (e: any) => {
  // console.log('学科改变：', e.detail.value)
  state.select_subject = e.detail.value
  getExerciseKnowledgeData()
}
// 最做题目筛选改变了
const hasDoneChange = (e: any) => {
  state.select_has_done = e.detail.value
}
// 获取知识点api的参数
let subjectParams = {
  subject_id: state.select_subject,
}
// 获取某个学科下的所有练习知识点（简洁结构）
const getExerciseKnowledgeData = async () => {
  // 获取知识点api的参数
  let subjectParams = {
    subject_id: state.select_subject,
  }
  const res = await getExerciseKnowledgeAPI(subjectParams)
  console.log('知识点：', res)
  if (res.code == 200) {
    exerciseKnowledgeList.value = res.data.results
  } else {
    uni.showToast({ icon: 'error', title: '获取练习知识点失败' })
  }
}
// 页面初始化加载事件
onLoad(async () => {
  // console.log('页面加载')
  getExerciseKnowledgeData()
})
// 页面初始化加载事件
onShow(() => {
  state.select_type = 1
})
// 自定义下拉刷新被触发
onPullDownRefresh(async () => {
  await Promise.all([getExerciseKnowledgeData()])
  // 停止页面加载动画
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 1000)
})
</script>

<style lang="scss" scoped>
.container {
  margin: 1rpx;
  padding: 1rpx;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 400rpx;
}

.top {
  position: fixed;
  top: calc(10rpx);
  bottom: 0;
  width: 100%;
}

.checkbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: left;
  align-items: center;
  font-size: 32rpx;
}

.text {
  font-size: 28rpx;
}

.notice {
  font-size: 25rpx;
}

.card {
  position: fixed;
  font-size: 28rpx;
  padding: 1rpx;
  top: 240rpx;
  height: calc(100% - 300rpx);

  .green_color {
    color: green;
  }

  .blue_color {
    color: blue;
  }
}
</style>
